<template>
  <el-breadcrumb :separator-icon="ArrowRight">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>

    <template v-for="item in list">
      <el-breadcrumb-item>{{ item.meta.title }}</el-breadcrumb-item>
    </template>
  </el-breadcrumb>


  <el-divider />
</template>


<script lang="ts" setup>
import { onMounted, watch, ref } from 'vue'
import { ArrowRight } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const list = ref([])
onMounted(() => {
  
})
watch(() => route.matched, (newValue: any, _oldValue: any) => {
  list.value = []
  if (newValue.length > 1) {
    list.value = newValue
  }

})
</script>